<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>filtermenu 测试</title>
    <link href="../../menu/demo/assets/menu.css" rel="stylesheet"/>
    <link href="../../menu/demo/assets/menuitem.css" rel="stylesheet"/>
    <link href="../../menu/demo/assets/submenu.css" rel="stylesheet"/>
    <link href="../../menu/demo/assets/filtermenu.css" rel="stylesheet"/>
    <style>
        .hasChildren .ks-menuitem-content {
            background: url("http://a.tbcdn.cn/apps/sell/1.0/img/ic_bg.png") no-repeat scroll 500px 500px transparent;
            background-position: 100% -78px;
        }

        .ks-menuitem-selected {
            background-color: #D6EDF4;
            color: #1B4D91;
        }

        .ks-menuitem-hit {
            font-weight: bold;
            color: red;
        }

        .ks-menuitem {
            padding-right: 10px;
        }
    </style>
</head>
<body>

<h1>可过滤菜单</h1>

<h2>操作指南</h2>

<ol>
    <li>可在输入框输入过滤</li>
    <li>上下键过滤项间导航</li>
    <li>输入字后，再输入 ，或, 根据当前高亮项进行自动补全</li>
</ol>

<h2>从已知元素生成</h2>

<div id="filterMenuExist"
     class="ks-filter-menu ks-menu" style="width: 500px">
    <div class='ks-filter-menu-input-wrap'>
        <div class="ks-filter-menu-placeholder">from markup</div>
        <input autocomplete="off" class="ks-filter-menu-input"/>
    </div>
    <div class="ks-filter-menu-content" style="height: 200px;overflow: auto;">
        <div class="ks-menuitem-selectable ks-menuitem">女鞋1</div>
        <div class="ks-menuitem-selectable ks-menuitem">家居服务2</div>
        <div class="ks-menuitem-selectable ks-menuitem">手机3</div>
        <div class="ks-menuitem-selectable ks-menuitem">女鞋4</div>
        <div class="ks-menuitem-selectable ks-menuitem">家居服务5</div>
        <div class="ks-menuitem-selectable ks-menuitem">手机6</div>
        <div class="ks-menuitem-selectable ks-menuitem">女鞋7</div>
        <div class="ks-menuitem-selectable ks-menuitem">家居服务8</div>
        <div class="ks-menuitem-selectable ks-menuitem">手机9</div>
        <div class="ks-menuitem-selectable ks-menuitem">女鞋10</div>
        <div class="ks-menuitem-selectable ks-menuitem">家居服务11</div>
        <div class="ks-menuitem-selectable ks-menuitem">手机12</div>
    </div>
</div>
<br/>
<br/>

<h2>自定义过滤策略（拼音支持）</h2>

<div id="container">

</div>
<button id="reset">reset</button>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>


<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>

    KISSY.ready(function (S) {
        S.use("util,menu,filter-menu,node", function (S, util,Menu,FilterMenu,$) {
            if (1)(function () {

                var m1 = new Menu.Item({
                    selectable: true,
                    content: "女鞋",
                    pinyin: "nx"
                });
                var m4 = new Menu.Item({

                    selectable: true,
                    content: "女装女服",
                    pinyin: "nznf"
                });
                var m2 = new Menu.Item({

                    selectable: true, content: "家居服务",
                    elCls: "hasChildren",
                    pinyin: "jjfw"
                });
                var m3 = new Menu.Item({

                    selectable: true,
                    content: "手机",
                    elCls: "hasChildren",
                    pinyin: "sj"
                });
                var filterMenu = new FilterMenu({
                    render: "#container",
                    width: 500,
                    allowMultiple: true,
                    placeholder: "请输入"
                });
                filterMenu.addChild(m1);
                filterMenu.addChild(m2);
                filterMenu.addChild(m3);
                filterMenu.addChild(m4);
                filterMenu.render();
                var selected = null;

                var origFilterItems = filterMenu.filterItems;

                /**
                 * 自定义过滤策略，不自定义则是简单的内容 indexOf 查找
                 * @param str
                 */
                filterMenu.filterItems = function (str) {
                    var self = this,
                            _labelEl = self.get("placeholderEl"),
                            filterInput = self.get("filterInput");

                    // 有过滤条件提示隐藏，否则提示显示
                    _labelEl[str ? 'hide' : 'show']();

                    var children = self.get('children');

                    // 拼音
                    if (/^[a-z\s]+$/i.test(str)) {

                        // 过滤所有子组件
                        util.each(children, function (c) {
                            var pinyin = c.get("pinyin"),
                                    content = c.get("content");

                            var index;
                            if ((index = pinyin.indexOf(str)) > -1) {
                                // 如果符合过滤项
                                // 显示
                                c.show();
                                content = content.substring(0, index) +

                                        "<span class='" + "ks-menuitem-hit" + "'>" +
                                        content.substring(index, index + str.length)
                                        + "<" + "/span>"
                                        + content.substring(index + str.length, content.length);

                                // 匹配子串着重 wrap
                                c.get('el').html(content);
                            } else {
                                c.hide();
                            }
                        });

                    } else {
                        origFilterItems.call(this, str);
                    }
                };

                filterMenu.on("click", function (e) {
                    if (selected != e.target) {
                        selected && selected.set("selected", false);
                        selected = e.target;
                        alert("selected : " + selected.get("content"));
                    }
                });


                $("#reset").on("click", function () {
                    filterMenu.reset();
                });
            })();

            (function () {
                /**
                 *  从 html 生成
                 */
                var filterMenu = new FilterMenu({
                    srcNode: '#filterMenuExist',
                    width: 200
                });

                filterMenu.render();

                var selected = null;

                filterMenu.on("click", function (e) {
                    if (selected != e.target) {
                        selected && selected.set("selected", false);
                        selected = e.target;
                        alert("selected : " + selected.get("content"));
                    }
                });

            })();

        });
    });

</script>
</body>
</html>